<template>
	<div class="premium">
		<el-row :gutter="10">
			<el-col :span="20">
				<AElFormRex :data="form" />
			</el-col>
			<el-col :span="4">
				<el-button type="primary" icon="el-icon-search">查询</el-button>
				<el-button v-show="selectData.length" type="danger" @click="returnPremium">退费</el-button>
			</el-col>
		</el-row>
		<AElTable :data="data" :columns="columns" @selection-change="selectionChange">
			<AElPagination slot="pagination" :data="pageSize" />
		</AElTable>
		<el-dialog center title="退费提示" :visible.sync="visible" width="30%">
			<span class="return-premium-tips">确定退费吗？</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="visible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'Premium',
	data() {
		return {
			visible: false, // 是否显示弹窗
			form: {}, // 表单
			data: [], // 表格数据
			columns: [], // 表格配置
			selectData: [], // 表格复选框选中数据
			pageSize: {
				page: 1,
				size: 10,
				total: 0
			},// 分页配置
		}
	},
	created() {
		this.getData();
		this.setForm();
		this.setColumns();
	},
	methods: {
		/**
		 * 退费按钮操作
		 */
		returnPremium() {
			this.visible = true;
		},
		/**
		 * 提交
		 */
		submit() {
			this.visible = false;
		},
		/**
		 * 表格复选框事件
		 */
		selectionChange(data) {
			this.selectData = data;
		},
		/**
		 * 配置表单
		 */
		setForm() {
			this.form = {
				TuiFeiRXM: { label: "患者姓名" },
				BinAnH: { label: "病案号" },
				YuYueSJ: {
					label: "预约时间",
					type: "date",
				},
				TuiFeiType: {
					label: "退费状态",
					type: "select",
					children: [
						{
							label: "退费中",
							value: "-1"
						},
						{
							label: "未收费",
							value: "0"
						},
						{
							label: "代缴费",
							value: "1"
						},
						{
							label: "已计费",
							value: "2"
						},
						{
							label: "已结算",
							value: "3"
						}
					]
				},
			}
		},
		/**
		 * 配置表格
		 */
		setColumns() {
			this.columns = [
				{
					type: "selection",
					selectable: function ({ TuiFeiZT = "0" }) {
						return TuiFeiZT === "3";
					}
				},
				// { label: "医嘱ID", prop: "YiZhuID" },
				{ label: "医嘱名称", prop: "YiZhuMC" },
				{ label: "预约时间", prop: "YuYueSJ" },
				{ label: "预约次数", prop: "YuYueCS" },
				// { label: "申请单ID", prop: "ShenQingDID" },
				// { label: "治疗项目ID", prop: "ZhiLiaoXMID" },
				// { label: "治疗项目名称", prop: "ZhiLiaoXMMC" },
				// { label: "开单机构ID", prop: "KaiDanJGID" },
				// { label: "开单机构名称", prop: "KaiDanJGMC" },
				// { label: "开单科室ID", prop: "KaiDanKSID" },
				// { label: "开单科室名称", prop: "KaiDanKSMC" },
				// { label: "执行机构ID", prop: "ZhiXingJGID" },
				// { label: "执行机构名称", prop: "ZhiXingJGMC" },
				// { label: "执行科室ID", prop: "ZhiXinKSID" },
				// { label: "执行科室名称", prop: "ZhiXinKSMC" },
				// { label: "退费人ID", prop: "TuiFeiRID" },
				{ label: "患者姓名", prop: "TuiFeiRXM" },
				{ label: "病案号", prop: "TuiFeiRXM" },
				{
					label: "退费状态", prop: "TuiFeiZT",
					render: ({ row: { TuiFeiZT = "0" } }) => {
						switch (TuiFeiZT) {
							case "-1": return <span style="color:red">退费中</span>;
							case "0": return <span style="color:#999">未收费</span>;
							case "1": return <span style="color:#666">代缴费</span>;
							case "2": return <span style="color:#e6a23c">已计费</span>;
							case "3": return <span style="color:green">已结算</span>;
						}
					}
				},
				// {
				// 	label: "操作",
				// 	render: ({ row: { TuiFeiZT = "0" } }) => {
				// 		const onConfirm = () => {
				// 			console.log("确定退费");

				// 		};
				// 		switch (TuiFeiZT) {
				// 			case "3": return (
				// 				<el-popconfirm title="确定退费吗?" hideIcon onConfirm={onConfirm}>
				// 					<el-button type="text" style={{ color: "red" }} slot="reference">退费</el-button>
				// 				</el-popconfirm>
				// 			);
				// 			// case "1": return <span style={{ color: '#e6a23c' }} type="text">退费中</span>;
				// 			// case "2": return <span style={{ color: 'green' }} type="text">退费完成</span>;
				// 		}
				// 	}
				// },
			]
		},
		/**
		 * 获取数据
		 */
		getData() {
			this.data = [
				{
					YiZhuMC: "我是医嘱名称",
					type: "0",
					YuYueCS: "5",
					YuYueSJ: "20225-12-12",
					TuiFeiZT: "-1"
				},
				{
					YiZhuMC: "我是医嘱名称",
					type: "1",
					YuYueCS: "3",
					YuYueSJ: "20225-04-12",
					TuiFeiZT: "0"
				},
				{
					YiZhuMC: "我是医嘱名称",
					type: "2",
					YuYueCS: "9",
					YuYueSJ: "20225-06-02",
					TuiFeiZT: "1"
				},
				{
					YiZhuMC: "我是医嘱名称",
					type: "2",
					YuYueCS: "9",
					YuYueSJ: "20225-06-02",
					TuiFeiZT: "2"
				},
				{
					YiZhuMC: "我是医嘱名称",
					type: "2",
					YuYueCS: "9",
					YuYueSJ: "20225-06-02",
					TuiFeiZT: "3"
				},
				{
					YiZhuMC: "我是医嘱名称",
					type: "2",
					YuYueCS: "9",
					YuYueSJ: "20225-06-02",
					TuiFeiZT: "3"
				}
			]
		}
	}
}
</script>

<style lang="scss" scoped>
@import url('./index.scss');
</style>
